<template>
  <div>
    <el-card style="min-width: 1200px">
      <div class="createWebhooks">
        <img src="@/assets/imgs/setting/add.png" class="img" />
        <div>
          <div class="title">Webhooks测试</div>
          <div class="hint">Webhooks接收</div>
          <el-select v-model="row.urlAgreement" placeholder="请选择">
            <el-option label="http://" value="http"></el-option>
            <el-option label="https://" value="https"></el-option>
          </el-select>
          <el-input
            placeholder="请输入内容"
            v-model="row.notifyUrl"
            style="width: 700px; margin-left: 20px"
          >
          </el-input>
          <div class="choose">选择通知事件</div>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="checkedEvents"
            @change="handleCheckedEventsChange"
            style="margin-left: 24px"
          >
            <el-checkbox
              v-for="item in eventList"
              :label="item.eventName"
              :key="item.eventType"
              >{{ item.eventName }}</el-checkbox
            >
          </el-checkbox-group>
          <div style="margin-top: 50px">
            <el-button class="width120" @click="back">取消</el-button>
            <el-button class="width120" type="primary" @click="submit"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import base64 from "@/utils/code";

export default {
  name: "settingWebhooksEdit",
  data() {
    return {
      row: {},
      checkAll: false,
      checkedEvents: [],
      eventList: [],
      isIndeterminate: true,
    };
  },
  created() {
    this.row = JSON.parse(base64.decode(this.$route.query.item));
    if (this.row.eventNames) {
      this.checkedEvents = this.row.eventNames.split(",");
    }
    this.$http.post("/api/webhooks/listCanBind").then((res) => {
      this.eventList = res.data;
    });
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if(this.$route.name==this.$options.name){
        this.back();
        }
      },
    },
    deep: true,
  },
  methods: {
    handleCheckAllChange(val) {
      if (val) {
        this.checkedEvents = [];
        this.eventList.forEach((e) => {
          this.checkedEvents.push(e.eventName);
        });
      } else {
        this.checkedEvents = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckedEventsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.eventList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.eventList.length;
    },
    submit() {
      if (this.checkedEvents.length > 0) {
        const list = this.checkedEvents.map((item) => ({
          eventType: this.eventList.find((val) => val.eventName === item)
            .eventType,
          eventName: item,
        }));
        let data = {
          appEventInfoList: list,
          urlAgreement: this.row.urlAgreement,
          notifyUrl: this.row.notifyUrl,
        };
        if (this.row.id) {
          const url = this.row.urlAgreement + "://" + this.row.notifyUrl;
          this.$http
            .post("/api/webhooks/urlTest", {
              url: url,
              id: this.row.id,
            })
            .then((res) => {
              if (res.code === "0000") {
                data.id = this.row.id;
                this.$http.put("/api/webhooks/edit", data).then((res) => {
                  if (res.code == "0000") {
                    this.$message.success("修改成功！");
                    this.$router.push("/setting/webhooks");
                  }
                });
              }
            });
        } else {
          const url = this.row.urlAgreement + "://" + this.row.notifyUrl;
          this.$http
            .post("/api/webhooks/urlTest", {
              url: url,
            })
            .then((res) => {
              if (res.code === "0000") {
                this.$http.post("/api/webhooks/add", data).then((res) => {
                  if (res.code == "0000") {
                    this.$message.success("添加成功！");
                    this.$router.push("/setting/webhooks");
                  }
                });
              }
            });
        }
      } else {
        this.$message.warning("请选择通知事件！");
      }
    },
    back() {
      this.$router.push("/setting/webhooks");
    },
  },
};
</script>

<style lang="scss" scoped>
.createWebhooks {
  display: flex;
  padding: 20px;
  .img {
    width: 86px;
    height: 86px;
    margin-right: 40px;
  }
  .title {
    font-size: 22px;
    font-weight: 600;
    color: #4f595f;
    margin-bottom: 5px;
  }
  .hint {
    color: #869daa;
    margin-bottom: 32px;
  }
  .choose {
    margin: 30px 0;
    font-size: 16px;
    color: #666;
  }
  .el-checkbox {
    margin-bottom: 15px;
  }
}
:deep(.el-select) {
  .el-input__inner {
    width: 118px;
    border: none;
    background: #e5f8f9;
    color: #869daa;
  }
  .el-icon-arrow-up {
    &::before {
      content: "\e78f";
      color: #889fab;
    }
  }
}
</style>
